/*RESET*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} 

/* Farben

 rot :#E61E1E;
 gelb: #FFE600;
 blau:#001EE6;
 grün:#3CB43C;

*/


body {line-height: 1;}

ol, ul{list-style:none;} 

blockquote, q{quotes:none;} 
blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} 
ins{text-decoration:none;} 
del{text-decoration:line-through;} 
table{border-collapse:collapse; border-spacing:0;}



/*MAIN*/

body { 
	font-size: 1.05em;
        line-height: 1.25em;
        font-family: Helvetica Neue, Helvetica, Arial;
	background: white;
	color: black;
}


a {
	color: black;	text-decoration: none;
	font-weight: bold;
}


a:hover {
	color: red;
}


header {
	background:white;
        width: 100%;
        height: 90px;
        position: fixed;
        top: 0;
        left: 0;
        border-bottom: 4px solid #E61E1E;
	z-index: 100;
}


footer { 
  padding: 20px;	
  height: 76px;
  background: white;
  border-top: 4px solid #E61E1E;
}

#icons { float:right; }

.videobereich {
    background-color: white;
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
    margin-bottom: 1em;

}	

.videoextern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#content {
}

#logo{
	margin: 15px;
	float: left;
	width: 158px;
	height: 60px;
	background: url(../img/logo.png) no-repeat center;
	display: block;
     }

nav {
	color:black;
	float: right;
	padding: 30px;
    }


#menu-icon {
	display: hidden;
	width: 40px;
	height: 40px;
	background: #E61E1E url(../img/menu-icon.png) center;
     }

a:hover#menu-icon {
	background-color: #001EE6;
	border-radius: 4px 4px 0 0;
}


ul {
	list-style: none;
}



li {
	display: inline-block;
	float: left;
	padding: 10px
}

.current {
	color: BLUE;
}

.menulink {
	color: black;	text-decoration: none;
	font-weight: bold;
}

section {
	margin: 80px auto 100px;
	max-width: 980px;
	position: relative;
	padding: 20px
}



h1 {
	font-size: 2em;
	line-height: 1.15em;
	margin: 20px 0 ;
}

h2 {
	line-height: 1.15em;
	margin: 20px 0 ;
}

p {
	line-height: 1.45em;
	margin-bottom: 20px;
}

.bigimage {
	width: 100%;
}

span {
  background-color: red;
  color: white;
  padding: 10px;
}

.portraitimage {
	width: 20%;
	float: left; 
}

p.test {display: flex;}
.bioeintrag { 
	  position: relative;
  	left: 30px;
        border: 3px solid #73AD21;
}

.newseintrag { 
	border-top: 2px solid #3CB43C;margin-top: 10px; margin-bottom: 10px;
}


/*MEDIA QUERY*/
@media only screen and (max-width : 800px) 
{
	header {
		position: absolute;
	}
	#menu-icon {
		display:inline-block;
	}
	nav ul, nav:active ul {
		display: none;
		position: absolute;
		padding: 20px;
		background: black;
		border: 5px solid #E61E1E;
                right: 20px;
		top: 60px;
		width: 50%;
		border-radius: 4px 0 4px 4px;
	}


	nav li {
		text-align: center;
		width: 100%;
		padding: 10px 0;
		margin: 0;
	}


	nav:hover ul {
		display: block;
	}
}

/* Tables */
table.rspCols {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  border: 1px solid #000000;
  table-layout: fixed;
}

table.rspCols tr {
  border: 1px solid #000000;
}

table.rspCols th {
  padding: 0 0.5em 1em;
  height: 3em;
  font-size: 1.2em;
  text-align: left;
  vertical-align: top;
  background: #dfdfdf;
  color: #000000;
  border: 1px solid #000000;
}

table.rspCols td {
  padding: 0.5em;
  font-size: 1em;
  vertical-align: middle;
  background: #eeeeee;
  color: #000000;
  border: 1px solid #000000;
}

table.rspCols td:last-child {
  text-align: left;
}


@media screen and (max-width: 720px) {
  table.rspCols {
    display: block;
    border: initial;
  }

  table.rspCols thead {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  table.rspCols tr {
    margin: 0 0 2em 0;
    width: 100%;
    border-top: none;
    float: left;
  }

  table.rspCols tr:last-child {
    margin-bottom: 0;
  }

  table.rspCols td {
    padding: 0 0.5em 0 0;
    width: 100%;
    text-align: right;
    line-height: 400%;
    background: #eeeeee;
    border: 1px solid #000000;
    border-top: 1px solid #000000;
    border-right: 1px;
    border-bottom: none;
    border-left: 1px;
    float: left;
  }

  table.rspCols td:last-child {
    padding-bottom: 0;
  }

  table.rspCols td::before {
    padding: 0 0.5em;
    width: 8em;
    font-weight: bold;
    text-align: left;
    background: #dfdfdf;
    border-right: 1px solid #000000;
    content: attr(data-label);
    float: left;
  }
}
.biopic {
  width: 100%;
  max-width: 300px;
  height: auto;
}

.bioeintrag {
	
}

/* Galerie */
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
}

.column img {
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}